import React, { Component } from 'react';
import { Button, Tooltip, message, Spin } from 'antd';
import { WeaErrorPage, WeaLocaleProvider, WeaTop, WeaRightMenu, WeaTab, WeaLeftRightLayout } from 'ecCom';

import LeftOrgTree from './LeftOrgTree';
import CarUseContainer from './CarUseContainer';
import CarUseContainerMobile from './CarUseContainerMobile';
import CarConstant from '../../util/CarConstant';

import CreateCarFlowDialog from '../car/dialog/CreateCarFlowDialog';

import '../../style/carUseView.less';

import { inject, observer } from 'mobx-react';

const getLabel = WeaLocaleProvider.getLabel;
const rightBtns = [
  { key: 'new', content: getLabel(385847, '新建用车申请'), icon: <span className="icon-coms-New-Flow" /> },
];

let carFlowData = {};

@inject('carUseViewStore')
@observer
class CarUseView extends React.Component {
	static contextTypes = {

	}
	constructor(props) {
	  super(props);
	  this.state = {
	    spinLoading: false,
	  };
	}

	render() {
	  const { carUseViewStore } = this.props;
	  const { loading, form, conditioninfo, topTab, selectedKey, showSearchAd, sessionkey, tableStore, org } = carUseViewStore;
	  if (this.getUrlKey('ismobile') == '1') {
	    return (
  <div>
	        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@j1zcwd`} spinning={this.state.spinLoading}>
      <WeaTop
	            ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@zssaq6`}
    title={getLabel(19018, '车辆使用情况')}
    loading={loading}
    icon={CarConstant.icon}
    iconBgcolor={CarConstant.iconBgColor}
	            showDropIcon
  >
	            <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@suvo3g`} defaultShowLeft={false} leftWidth={250} leftFixed leftCom={<LeftOrgTree ecId={`${this && this.props && this.props.ecId || ''}_LeftOrgTree@xhk8dr`} changeSubcompany={this.changeSubcompany.bind(this)} />} >
          <div className="wea-right-container">
        <CarUseContainerMobile ecId={`${this && this.props && this.props.ecId || ''}_CarUseContainerMobile@e6iloe`} ref="carCon" subId={org && org.id ? org.id : ''} subName={org && org.subName ? org.subName : ''} />
      </div>
        </WeaLeftRightLayout>

  </WeaTop>
	          <CreateCarFlowDialog ecId={`${this && this.props && this.props.ecId || ''}_CreateCarFlowDialog@m0yahc`} ref="createCarFlow" />
    </Spin>
	      </div>
	    );
	  }
	  return (
	    <div>
	      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@cz9mmt`} spinning={this.state.spinLoading}>
	        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@dc637a`} datas={this.getRightBtn()} onClick={this.clickButton}>
    <WeaTop
	            ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ayspiu`}
  title={getLabel(19018, '车辆使用情况')}
	            loading={loading}
	            icon={CarConstant.icon}
  iconBgcolor={CarConstant.iconBgColor}
  buttons={[
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@whflru@createCarUse`} type="primary" onClick={this.createCarUse}>{getLabel(385847, '新建用车申请')}</Button>,
	            ]}
	            showDropIcon
	            dropMenuDatas={this.getRightBtn()}
	            onDropMenuClick={this.clickButton}
	          >
	            <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@9k0lrf`} defaultShowLeft={false} leftCom={<LeftOrgTree ecId={`${this && this.props && this.props.ecId || ''}_LeftOrgTree@7f0gmm`} changeSubcompany={this.changeSubcompany.bind(this)} />} showLeft={false}>
	              <div className="wea-right-container">
	                <CarUseContainer ecId={`${this && this.props && this.props.ecId || ''}_CarUseContainer@w6tzhh`} ref="carCon" subId={org && org.id ? org.id : ''} subName={org && org.subName ? org.subName : ''} />
  </div>
      </WeaLeftRightLayout>

	          </WeaTop>
  </WeaRightMenu>
    <CreateCarFlowDialog ecId={`${this && this.props && this.props.ecId || ''}_CreateCarFlowDialog@4859v4`} ref="createCarFlow" />
  </Spin>
  </div>
	  );
	}


	getRightBtn = () => {
	  const btns = [];
	  btns.push({
	    icon: <span className="icon-coms-New-Flow" />,
	    content: getLabel(385847, '新建用车申请'),
	    key: 'new',
	  });
	  return btns;
	}

	getUrlKey(name) { // 判断页面url地址是否包含ismobile，并返回值。
	  return decodeURIComponent((new RegExp(`[?|&]${name}=([^&;]+?)(&|#|;|$)`).exec(location.href) || ['', ''])[1].replace(/\+/g, '%20')) || null;
	}

	changeSubcompany = (nodeObj) => {
	  if (this.refs && this.refs.carCon) {
	    this.refs.carCon.wrappedInstance.changeSubcompany(nodeObj, () => { });
	  }
	  // this.showLoading(true);
	}

	showLoading(loading) {
	  this.setState({
	    spinLoading: loading,
	  });
	}

	showLeft = (flag) => {
	  this.refs.carCon.wrappedInstance.updateScroll();
	}

	createCarUse = () => {
	  if (carFlowData && carFlowData.datas) {
	    this.openCarCreateFlow(carFlowData);
	  } else {
	    const { carUseViewStore } = this.props;
	    carUseViewStore.getCarFlowCreateData(this.openCarCreateFlow.bind(this));
	  }
	}

	openCarCreateFlow = (result) => {
	  if (result && result.count) {
	    carFlowData = result;
	    if (result.count == 0) {
	      message.info(getLabel(385845, '没有对应的车辆申请流程可创建'));
	    } else if (result.count == 1) {
	      const datas = result.datas;
	      if (datas.length == 1) {
	        const flows = datas[0].flows;
	        const workflowid = flows[0].workflowid;
	        this.onNewRequest(workflowid);
	      }
	    } else if (result.count > 1) {
	      this.refs.createCarFlow.open(result);
	    }
	  } else {
	    message.error(getLabel(385846, '获取车辆流程失败'));
	  }
	}

	// 新建流程
	onNewRequest(wfid) {
	  this.refs.createCarFlow.onNewRequest(wfid);
	}


	clickButton = (key) => {
	  this.createCarUse();
	}
}


// 组件检错机制
class MyErrorHandler extends Component {
  render() {
    const hasErrorMsg = this.props.error && this.props.error !== '';
    return (
      <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@4api0m`} msg={hasErrorMsg ? this.props.error : '对不起，该页面异常，请联系管理员！'} />
    );
  }
}

export default CarUseView;
